<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    canvas {
        background-color: rgba(255, 0, 0, 0.1);
    }

    body {
        margin: 0;

    }
</style>

<body>
    <canvas id="tutorial" width="300" height="300px">
        如果您的浏览器不兼容,请升级.
    </canvas>

</body>
<script>
    window.onload = function () {
        let canvasEl = document.getElementById("tutorial");

        if (!canvasEl.getContext) {
            return;
        }
        let ctx = canvasEl.getContext('2d');
        console.log(ctx);


        ctx.fillRect(0, 0, 100, 50)
        // ctx.strokeRect()


    }
</script>

</html>